/**
 * Created by umakr on 2018/3/20.
 */
import React, { PureComponent } from 'react';
import { connect} from 'dva';
import { Row, Col, Card, Form, Input, message, Button, DatePicker,Select  } from 'antd';
const { RangePicker } = DatePicker;
import AppVersionTable from '../../components/AppVersion';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

import styles from './HisVersion.less';

const FormItem = Form.Item;
const Option = Select.Option;

@connect(state => ({
  appVersion: state.appVersion,
}))
@Form.create()
export default class HisVersion extends PureComponent {
  state = {
    pageNo:1,
    pageSize:10,
    addInputValue: '',
    modalVisible: false,
    expandForm: false,
    selectedRows: [],
    formValues: {},
    versionCode:'',
    versionType:''
  };

  componentDidMount() {
    const pageNo = this.state.pageNo;
    const pageSize = this.state.pageSize;
    const versionCode = this.state.versionCode;
    const versionType = this.state.versionType;
    this.handleInitSearch(pageNo,pageSize,versionCode,versionType);
  }
  //把初始化查询的代码抽离出来
  handleInitSearch = (pageNo,pageSize,versionCode,versionType) => {
    const { dispatch } = this.props;
    const params = {
      pageNo: pageNo,
      pageSize: pageSize,
      versionCode:versionCode,
      versionType:versionType,
    };
    dispatch({
      type: 'appVersion/listHisVersion',
      payload:params,
    });
  }

  //实现分页查询电台
  handleRadioStationTableChange = (pagination, filters, sorter) => {
    const pageNo = pagination.current;
    const pageSize = pagination.pageSize;
    this.setState({
      pageNo:pageNo,
    },() => {
      this.handleInitSearch(pageNo,pageSize,this.state.versionCode,this.state.versionType);
    });
  }

  //重置查询电台
  handleFormReset = () => {
    const { form } = this.props;
    form.resetFields();
    this.setState({
      pageNo:1,
      versionCode:'',
      versionType:'',
    },() => {
      const {pageNo,pageSize,versionCode,versionType} = this.state;
      this.handleInitSearch(pageNo,pageSize,versionCode,versionType);
    });
  }

  /**
   * 版本号搜索
   * @param record
   * @param status
   */


  handleSearch = (e) => {
    const self = this;
    e.preventDefault();
    const { form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      var versionCode = fieldsValue.searchVersionCode && fieldsValue.searchVersionCode.valueOf();
      var re = /^[0-9]+$/ ;
      if(re.test(versionCode) || versionCode == undefined || versionCode == ''){
        if(versionCode == undefined){
          versionCode = "";
        }
        self.setState({
          pageNo:1,
          versionCode:versionCode
        },() => {
          const {pageNo,pageSize} = self.state;
          self.handleInitSearch(pageNo,pageSize,versionCode,this.state.versionType);
        });
      } else {
        message.info('请输入整数');
        return;
      }
    });
  }

  handleChange(value) {
    var me = this;
    me.setState({
      versionType:value
    })
  }

  renderForm() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={4} sm={14}>
            <FormItem label="版本类型" wrapperCol={{span:12}}>
              <Select value={this.state.versionType} defaultValue={this.state.versionType} style={{width:120}} onChange={this.handleChange.bind(this)}>
                <Option value="">全部</Option>
                <Option value="1">android</Option>
                <Option value="0">ios</Option>
              </Select>
            </FormItem>
          </Col>
          <Col md={4} sm={14}>
            <FormItem label="版本号" wrapperCol={{span:12}}>
              {getFieldDecorator('searchVersionCode')(
                <Input placeholder="版本号" />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit">查询</Button>
              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>重置</Button>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  render() {
    const { appVersion: { loading: loading, appVersionData } } = this.props;
    // console.log('___________________________________')
    // console.log(appVersionData)
    const { selectedRows} = this.state;
    return (
      <PageHeaderLayout>
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListForm}>
              {this.renderForm()}
            </div>
            <AppVersionTable
              selectedRows={selectedRows}
              loading={loading}
              appVersionData={appVersionData}
              onChange={this.handleRadioStationTableChange}
            />
          </div>
        </Card>
      </PageHeaderLayout>
    );
  }
}

